<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>第一个界面</title>
    <link rel="stylesheet" href="/css/nacss.css" />
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/bootstrap.bundle.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <div class="page">
      <div class="header">
        <div class="logo">
          <div class="logo-img"></div>
          NAME
        </div>

        <div class="pro">
          <div style="font-size: 30px; color: white">
            <button
              class="btn btn-outline-primary"
              data-bs-toggle="offcanvas"
              data-bs-target="#test"
            >
              <i
                class="bi bi-arrow-bar-right"
                style="font-size: 30px; color: white"
              >
              </i></button
            >welcome
          </div>
          <div class="offcanvas offcanvas-start" id="test">
            <div class="offcanvas-header">
              <div class="offcanvas-title"><h2 style="text-align: center;">即便如此还是想要传达wakuwaku</h2></div>
              <button class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body">
              <p1 style="text-align: center;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 哼哼哼~欢迎来到NAME秘密行动指挥中心，根据预言还有不久盛大的B站周年祭就将拉开帷幕。
                「wakuwaku」
                嗯嗯~这次的主题就定为《即便如此还是想要传达wakuwaku》不对，谁在那里！？
                「Σ(っ °Д °っ惊！」
                算了应该是错觉（有所察觉），根据报告这次的周年祭也是空前绝后的宏大阵容，根据已经流出的一部分节目单来看，有舞台剧、舞蹈、歌曲等，哇哦这节目数不是一般的多，由于这次特殊的线上形式，嗯嗯，甚至还有M！M！D！
                WAKUWAKU!!!(猛男破音)咳咳~根据NANA在排练现场拍摄的照片来看，这次大家也是一样的元气满满呢，嗯嗯为了取悦本王都很努力呢，不错不错，嗯哈哈哈哈哈！！！
                「咔嚓」 透露的也够多的了，真希望最后NANA能把我拍帅点（笑）
              </p1>
            </div>
          </div>
          <div class="dropdown">
            <button
              class="btn btn-outline-success dropdown-toggle"
              data-bs-toggle="dropdown"
              style="color: white"
            >
              账号信息
            </button>
            <div class="dropdown-menu">
              <div>个人信息</div>
              <div>切换账号</div>
              <div>注销</div>
            </div>
          </div>
        </div>
      </div>
      <div class="body">
        <div class="aside">
          <div class="accordion" style="width: 200px" id="acc">
            <div class="accordion-item" style="background-color: #618de5">
              <div class="accordion-header">
                <button
                  class="btn btn-info accordion-button"
                  data-bs-toggle="collapse"
                  data-bs-target="#a"
                  style="background-color: #103ae0; color: white"
                >
                  <span style="margin-left: 25px"
                    ><i class="bi bi-person-video2"></i> 关于部门</span
                  >
                </button>
              </div>
              <div class="collapse" id="a" data-bs-parent="#acc">
                <div class="accordion-body" style="padding: 0px">
                  <span class="list-group">
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                      <i class="bi bi-window-fullscreen"></i> 部门申请
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                      <i class="bi bi-stack"></i> 我的部门
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                      <i class="bi bi-sliders2"></i> 转部申请
                    </span>
                   
                  </span>
                </div>
              </div>
            </div>
            <div class="accordion-item" style="background-color: #618de5">
              <div class="accordion-header">
                <button
                  class="btn btn-info accordion-button"
                  data-bs-toggle="collapse"
                  data-bs-target="#b"
                  style="background-color: #103ae0; color: white"
                >
                  <span style="margin-left: 25px"
                    ><i class="bi bi-align-middle"></i>部门总览</span
                  >
                </button>
              </div>
              <div class="collapse" id="b" data-bs-parent="#acc">
                <div class="accordion-body" style="padding: 0px">
                  <span class="list-group">
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-browser-edge"></i> COS部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-snapchat"></i> 宅舞部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-music-note-list"></i> 声优部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-yin-yang"></i> wota艺部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-wrench-adjustable"></i> 道具部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-camera"></i> 后期部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-cart4"></i> 后勤部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-vector-pen"></i> 原创部
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-volume-up"></i> 外宣部
                    </span>
                  </span>
                </div>
              </div>
            </div>
            <div class="accordion-item" style="background-color: #618de5">
              <div class="accordion-header">
                <button
                  class="btn btn-info accordion-button"
                  data-bs-toggle="collapse"
                  data-bs-target="#c"
                  style="background-color: #103ae0; color: white"
                >
                  <span style="margin-left: 25px"
                    ><i class="bi bi-play-circle-fill"></i> 社团展示</span
                  >
                </button>
              </div>
              <div class="collapse" id="c" data-bs-parent="#acc">
                <div class="accordion-body" style="padding: 0px">
                  <span class="list-group">
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-brightness-high"></i> 舞台剧
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-camera-fill"></i> COS正片
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-stars"></i> 宅舞
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-file-music-fill"></i> 歌曲
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-moon-stars"></i> wota艺
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                      <i class="bi bi-chat-left-heart-fill"></i> 广播剧
                    </span>
                    <span
                      class="list-group-item-action list-group-item-success ty"
                      style="color: white"
                    >
                    <i class="bi bi-fan"></i> 配音秀
                    </span>
                  </span>
                </div>
              </div>
            </div>
        
          </div>
        </div>
        <div class="main">
          <div class="mainh">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item">Home</li>
                <li class="breadcrumb-item">Library</li>
                <li class="breadcrumb-item active" aria-current="page">Data</li>
              </ol>
            </nav>
          </div>
          <div class="mainb">
            <!-- <form class="container"> -->
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>社员名称</th>
                  <th>入社时间</th>
                  <th>所在部门</th>
                  <th>职能</th>
                  <th>是否改删</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>黑土</th>
                  <th>2018/10/21</th>
                  <th>wota艺部</th>
                  <th>20级社长、20级wota艺部部长</th>
                  <th>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a1">
                           修改
                          </button>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a2">
                           删除
                          </button>
                         
                  </th>
                </tr>
                <tr>
                  <th>雀舌</th>
                  <th>2019/10/19</th>
                  <th>wota艺部</th>
                  <th>20级副社长、20级宅舞部部长</th>
                  <th>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a1">
                           修改
                          </button>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a2">
                           删除
                          </button>
                         
                  </th>
                </tr>
                <tr>
                  <th>吉馍</th>
                  <th>2019/10/19</th>
                  <th>cos艺部</th>
                  <th>20级cos部副部长</th>
                  <th>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a1">
                           修改
                          </button>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a2">
                           删除
                          </button>
                         
                  </th>
                </tr>
                <tr>
                  <th>十二喵</th>
                  <th>2019/10/19</th>
                  <th>声优部、宅舞部</th>
                  <th>20级声优部副部长</th>
                  <th>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a1">
                           修改
                          </button>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a2">
                           删除
                          </button>
                         
                  </th>
                </tr>
                <tr>
                  <th>MAO</th>
                  <th>2020/12/21</th>
                  <th>宅舞部</th>
                  <th>无</th>
                  <th>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a1">
                           修改
                          </button>
                     <button class="btn btn-primary" data-bs-toggle="modal"  data-bs-target="#a2">
                           删除
                          </button>
                         
                  </th>
                </tr>
               
              </tbody>
              <tfoot></tfoot>
            </table>

            <!-- </form> -->
          </div>
        </div>
      </div>
    </div>
    <div class="body-main-modal">
      <div class="modal fade" id="a1">
        <div class="modal-dialog" role="dialog">
         <div class="modal-content">
       <div class="modal-header">是否修改
         <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
         </button>
       </div>
       <div class="modal-body">
         点击“是”进入修改页面
       </div>
       <div class="modal-footer">
         <button class="btn btn-success">是
         </button>
         <button class="btn btn-success">否                    
         </button>
       </div>
         </div>
       </div>
             </div>
      <div class="modal fade" id="a2">
        <div class="modal-dialog" role="dialog">
         <div class="modal-content">
       <div class="modal-header">是否删除
         <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
         </button>
       </div>
       <div class="modal-body">
         删除后将无法找回
       </div>
       <div class="modal-footer">
         <button class="btn btn-success">是
         </button>
         <button class="btn btn-success">否                    
         </button>
       </div>
         </div>
       </div>
             </div>
      
             
      <div>
  </body>
</html>
